<template>
  <div>
    <el-row style=";background:#FFFFFF">
      <el-row style="padding:10px">
        <el-col :span="4">
          <el-select style="width:90%" v-model="mOrderStatus" placeholder="请选择状态">
            <el-option
              v-for="item in mLogType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            style="margin-left:10px;width:90%"
            v-model="mDateRange"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button icon="el-icon-search" circle type="primary" @click="searchAll()"></el-button>
        </el-col>
      </el-row>

      <el-table
        :data="mTableData"
        v-loading="mTableLoading"
        border
        stripe
        style="width: 100%;margin-top:20px"
      >
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="日志类型" prop="strLogType"></el-table-column>
        <el-table-column label="操作描述" prop="logDesc"></el-table-column>
        <el-table-column label="操作时间" prop="timestamp"></el-table-column>
      </el-table>
      <el-row style="margin-top:10px;padding-bottom:10px">
        <el-pagination
          style="float:right"
          v-if="totalPage"
          background
          layout="prev, pager, next,jumper"
          @current-change="pageIndexChange()"
          :current-page.sync="page"
          :page-count="totalPage"
        ></el-pagination>
        <span
          v-if="totalPage"
          style="float:right;font-size:14px;margin-top:5px;color:#606266;margin-right:20px"
        >
          共&nbsp;
          <span style="color:#F56C6C">{{totalPage}}</span>&nbsp;页/&nbsp;
          <span style="color:#F56C6C">{{totalCount}}</span>&nbsp;条数据
        </span>
      </el-row>
    </el-row>
  </div>
</template>


<style >
.mainDiv {
  min-width: 100%;
}
.topRow {
  min-width: 100%;
  background: white;
  padding: 10px;
  border-radius: 2px;
  color: #606266;
  font-size: 16px;
}
.spanPoint {
  cursor: pointer;
}
.borderMain {
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.borderAround {
  padding: 10px;
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.ctrlCard {
}
</style>



<script>
import { getRequestHeader, loginApi, getThirdCompanyApi } from "../api/user.js";
import { getCarsApi } from "../api/car.js";
import { getNowFormatDate, getWeekToday } from "../api/util.js";
import { turnOrderStatus } from "../api/orderHelper.js";
import {
  queryLogsApi,
  getDriversApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi
} from "../api/order.js";
import { Loading } from "element-ui";
import OrderDetailDialog from "./widget/OrderDetailDialog.vue";
export default {
  data() {
    return {
      mTableData: [],
      page: 1,
      totalPage: 0,
      pagesize: 12,
      totalCount: 0,

      pageCar: 1,
      totalPageCar: 0,
      pagesizeCar: 2,

      pageDriver: 1,
      totalPageDriver: 0,
      pagesizeDriver: 2,

      mOrderStatus: "all",
      mTableLoading: false,
      mDispatchDialog: false,
      mSelectRow: {},
      mThirdDispatchDialog: false,
      mCdmMap: [],
      mDrivers: [],
      mCars: [],
      mThridCompany: [],
      mCloseDialog: false,
      mActiveTabName: "first",
      mTmpCtrls: [],
      mCarSelectDialog: false,
      mDriverSelectDialog: false,
      mSearchKey: undefined,
      mDateRange: undefined,
      mSelectDriver: undefined,
      mFilter: undefined,
      mSelectCar: undefined,
      mTabActive: "first",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      mLogType: [
        { label: "全部", value: "all" },
        { label: "登录日志", value: "LoginType" },
        { label: "调度日志", value: "ControllerType" }
      ],
      mSelectThirdCompany: undefined
    };
  },
  components: {
    "v-OrderDetailDialog": OrderDetailDialog
  },
  created() {},
  mounted() {
    this.searchAll();
  },
  watch: {
    mOrderStatus(v1, v2) {
      this.searchAll();
    }
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    setPagesize(size) {
      this.page = 1;
      this.pagesize = size;
      this.queryLogs();
    },
    pageIndexChange() {
      // this.page = this.mUiPageIndex - 1;
      this.queryLogs();
    },
    calDate() {
      var d = {};
      d.start = undefined;
      d.end = getNowFormatDate() + " 23:59:59";
      if (this.mDateRange) {
        var arrs = ("" + this.mDateRange).split(",");
        if (arrs && arrs.length == 2) {
          d.start = arrs[0];
          d.end = arrs[1] + " 23:59:59";
        }
      }
      return d;
    },
    queryLogs() {
      var that = this;
      that.showFullLoading();
      that.mTableLoading = true;
      var dateR = this.calDate();

      queryLogsApi(
        this.page,
        this.pagesize,
        dateR.start,
        dateR.end,
        this.mFilter,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mTableLoading = false;
            that.page = data.currentPage;
            that.totalCount = data.totalCount;
            that.totalPage = data.totalPage;

            data.list.forEach(element => {
              if (element.logType == "LoginType") {
                element.strLogType = "登录日志";
              } else if (element.logType == "ControllerType") {
                element.strLogType = "调度日志";
              }
            });
            that.mTableData = data.list;
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.mTableLoading = false;
            that.mTableData = [];
          };
        })()
      );
    },

    searchAll() {
      this.page = 1;
      this.mFilter = {};
      this.mFilter.logType = this.mOrderStatus;
      this.queryLogs();
    }
    //----------over methods------
  }
};
</script>